<template>
  <view class="bananer">
    <view class="newNoticeBox">
      <view class="tubiao">
		  <image mode="widthFix" src="./../images/gb.png"></image>
        <!-- <img src="../images/gb.png" alt="" /> -->
      </view>
	  
      <u-notice-bar
        mode="vertical"
        :list="list"
        type="none"
        :volume-icon="false"
        class="news"
		@click="gdfd"
        color="#1C9997"
      ></u-notice-bar>
      <!-- <view class="newNoticePicBox">
            <img src="../images/guangbo.png" alt="" class="newNoticePic">
        </view>
        <view class="xiaoxi">
            ：商品抽奖存在概率性，付费请谨慎商品抽奖存在概率性
        </view> -->
    </view>
    <swiper
      autoplay
      interval="3000"
      duration="500"
      circular
      class="top-swiper"
      @transition="onTransition"
      @animationfinish="onAnimationfinish"
    >
      <swiper-item
        class="swiper"
        wx:key="id"
        v-for="(item, index) in imgList"
        :key="index"
      >
        <img
          :class="[swiperDistabled ? 'scale' : '']"
          :src="item.fullPath"
          @tap="jumpPage(item)"
        />
      </swiper-item>
    </swiper>
	
	<u-popup
	  v-model="showModal"
	  :border-radius="20"
	  mode="center"
	   isbg="transparent"
	  :closeable="false"
	  >
	 <view style="background: #ecf6fb;border-radius: 20rpx;">
			 <view style="width:500rpx;height: 600rpx;">
				 <image class="image posiab" style="height: 600rpx;"  :src="$IMG_URL + '/uploads/20241204/ef02b17b2bca465e0535f03db9663c16.png'"></image>
				<view class="flex-ju-c" style="height:600rpx;">
						<view style="background: #fff;position: relative;z-index: 5;width:450rpx;height: 550rpx;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.2);border-radius: 20rpx;padding:12px;">
						<scroll-view scroll-y style="height: 500rpx;">
							{{textnode}}
						</scroll-view>
						</view>
				</view>
			 </view>
		
	 </view>
	 <view @click="showModal = false" class="u-flex" style="justify-content: center;margin-top:20rpx;">
	 	<u-icon name="close-circle" size="50" color="#ccc"></u-icon>
	 </view>
	</u-popup>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: 'index_bananer',
  components: {},
  data() {
    return {
		textnode:"",
		showModal:false,
      list: [],
      imgList: [],
      swiperDistabled: false,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  mounted() {
    this.getNotice();
    this.getIndexSlideshow();
  },
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
	  gdfd(index){
		  this.textnode = this.list[index]
		  this.showModal = true
	  },
    async getNotice() {
      return new Promise((resolve, reject) => {
        this.$http('v1.getNotice', {}).then((res) => {
          if (res.code === 1) {
            let { data } = res;
            data.forEach((item) => {
              this.list.push(item.title);
            });
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    getIndexSlideshow() {
      this.$http('v1.getIndexSlideshow', {}).then((res) => {
        if (res.code === 1) {
          this.imgList = res.data;
        }
      });
    },
    // 轮播图 滚动开始
    onTransition() {
      if (this.swiperDistabled) return;
      this.swiperDistabled = true;
    },
    onAnimationfinish() {
      if (!this.swiperDistabled) return;
      this.swiperDistabled = false;
    },
    //轮播图跳转活动页面
    jumpPage(e) {
      switch (e.activity_type) {
        case 1:
          uni.navigateTo({
            url: `/pages/rewardGoods/portrait/index?id=${e.activity_id}`,
          });

          break;
        case 2:
          uni.navigateTo({
            url: `/pages/fukubukuro/extract/extract?id=${e.activity_id}`,
          });
          break;
      }
    },
  },
  //放置与data同级
  options: {
    styleIsolation: 'shared',
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.bananer {
  width: 690rpx;
  box-sizing: border-box;
  box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
  border-radius: 30rpx;
  .newNoticeBox {
    border-radius: 30rpx;
    height: 70rpx;
    width: 100%;
    line-height: 59rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    .tubiao {
      width: 59rpx;
      height: 59rpx;
      margin-right: 8rpx;
      image {
        width: 29rpx;
        height: 29rpx;
		margin-left:30rpx;
      }
    }
    text {
      height: 59rpx;
      line-height: 59rpx;
      color: #1C9997;
    }
    .news {
      width: 550rpx;
      /deep/ .u-notice-bar {
        height: 59rpx;
      }
      /deep/ .u-notice-bar {
        padding: 0 !important;
      }
    }
  }
  .top-swiper {
    width: 100%;
    height: 240rpx;
    margin-top: 24rpx;
    .swiper {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 240rpx;
        border-radius: 20rpx;
        transition: all 0.2s;
        &.scale {
          opacity: 0.6;
          transform: scaleX(0.96) scaleY(0.92);
        }
      }
    }
  }
}
</style>
